<template>
  <div class="management-state">
    <page-head>经营动态</page-head>
    <div class="content">
      <chart-title icon="surround">周边网点职住比（1.5km范围）</chart-title>
      <div class="job-resident-rate wrapper">
        <div class="left">
          <h3>20.5</h3>
          <p>职住比</p>
        </div>
        <ul class="right">
          <li>
            <p>工作人群</p>
            <p><span>20.47</span>万人</p>
          </li>
          <li>
            <p>工作人群</p>
            <p><span>20.47</span>万人</p>
          </li>
        </ul>
      </div>
      <chart-title icon="gender" unit="%">性别占比</chart-title>
      <div class="wrapper">
        <div class="gender-chart">
          <div class="chart-item">
            <v-chart :option="maleChart"></v-chart>
          </div>
          <div class="chart-item">
            <v-chart :option="famaleChart"></v-chart>
          </div>
        </div>
        <div class="gender-legend">
          <h2>
            <p>58%</p>
            <span>男</span>
          </h2>
          <h2>
            <p>58%</p>
            <span>男</span>
          </h2>
        </div>
      </div>
      <chart-title icon="job" unit="%">职业分布</chart-title>
      <div class="job-chart wrapper">
        <v-chart :option="jobChart"></v-chart>
      </div>
      <chart-title icon="money" unit="%">资产分布</chart-title>
      <div class="money-chart wrapper">
        <v-chart :option="moneyChart"></v-chart>
      </div>
      <chart-title icon="waihui" unit="万">外汇交易额</chart-title>
      <div class="waihui-chart wrapper">
        <v-chart :option="waihuiChart"></v-chart>
      </div>
      <chart-title icon="age" unit="%">年龄占比</chart-title>
      <div class="age-chart wrapper">
        <v-chart :option="ageChart"></v-chart>
      </div>
      <chart-title icon="product" unit="人">持有产品分布</chart-title>
      <div class="product-chart wrapper">
        <v-chart :option="productChart"></v-chart>
      </div>
    </div>
  </div>
</template>

<script>
import PageHead from '@/components/PageHead'
import ChartTitle from '@/components/ChartTitle'
import VChart from '@/components/VChart'

export default {
  data () {
    return {
      maleChart: {
        color: ['#DCC38F', 'rgba(124, 133, 140, .5)'],
        graphic: [
          {
            type: 'image',
            style: {
              image: require('@/assets/images/male.png'),
              width: 28,
              height: 28
            },
            top: 'center',
            left: 'center'
          }
        ],
        series: [
          {
            type: 'pie',
            radius: ['80%', '76%'],
            center: ['50%', '50%'],
            label: { show: false },
            silent: true,
            data: [
              { value: 58, name: '男 58%' },
              { value: 42, name: '' }
            ]
          }
        ]
      },
      famaleChart: {
        color: ['rgba(29, 213, 134, 1)', 'rgba(124, 133, 140, .5)'],
        graphic: [
          {
            type: 'image',
            style: {
              image: require('@/assets/images/famale.png'),
              width: 28,
              height: 28
            },
            top: 'center',
            left: 'center'
          }
        ],
        series: [
          {
            type: 'pie',
            radius: ['80%', '76%'],
            center: ['50%', '50%'],
            label: { show: false },
            silent: true,
            data: [
              { value: 58, name: '女 62' },
              { value: 42, name: '' }
            ]
          }
        ]
      },
      jobChart: {
        grid: {
          left: 0,
          right: 10,
          top: 10,
          bottom: 0,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '服务行业',
              '医疗',
              '技术人员',
              '私人业主',
              '公务员',
              '其他'
            ],
            axisLabel: {
              show: true,
              interval: 0,
              textStyle: {
                color: 'rgba(255,255,255,.7)',
                fontSize: 9,
                lineHeight: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,255.2)',
                opacity: 1
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: ['rgba(255,255,255,1)'],
                width: 1,
                type: 'solid',
                opacity: 0.2
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            max: 100,
            axisLabel: {
              show: true,
              textStyle: {
                color: 'rgba(255,255,255,.7)',
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0)',
                opacity: 0
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['rgba(255,255,255,1)'],
                width: 1,
                type: 'solid',
                opacity: 0.2
              }
            }
          }
        ],
        series: [
          {
            type: 'bar',
            data: [18.6, 13.0, 11.8, 7.5, 7.2],
            barWidth: 8, // 默认柱子宽度
            itemStyle: {
              color: 'rgba(220, 195, 143, 1)'
            },
            label: {
              show: true,
              position: 'top',
              color: 'rgba(220, 195, 143, 1)'
            }
          }
        ]
      },
      moneyChart: {
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          data: [
            '0-5万元',
            '5-20万元',
            '20-100万元',
            '100-800万元',
            '800万元以上',
            '800万元以上'
          ],
          textStyle: {
            color: '#fff' // 设置文字颜色
          },
          itemWidth: 8, // 设置宽度
          itemHeight: 8 // 设置高度
        },
        graphic: [
          {
            type: 'image',
            style: {
              image: require('@/assets/images/money-chart.png'),
              width: 40,
              height: 40
            },
            top: 'center',
            left: '23%'
          }
        ],
        series: [
          {
            name: '',
            type: 'pie',
            hoverAnimation: false,
            radius: ['76%', '70%'],
            center: ['30%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },

            labelLine: {
              show: false
            },
            color: ['#3B76DB', '#1DD586', '#99B9D5', '#5D6368', '#FFbF23'],
            data: [
              { value: 0, name: '0-5万元' },
              { value: 0, name: '5-20万元' },
              { value: 0, name: '20-100万元' },
              { value: 0, name: '100-800万元' },
              { value: 0, name: '800万元以上' }
            ]
          }
        ]
      },
      waihuiChart: {
        grid: {
          left: 0,
          right: 10,
          top: 15,
          bottom: 0,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '2020-01',
              '2020-02',
              '2020-03',
              '2020-04',
              '2020-05'
            ],
            axisLabel: {
              show: true,
              interval: 0,
              textStyle: {
                color: 'rgba(255,255,255,.7)',
                fontSize: 9,
                lineHeight: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,255.2)',
                opacity: 1
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: ['rgba(255,255,255,1)'],
                width: 1,
                type: 'solid',
                opacity: 0.2
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: 'rgba(255,255,255,.7)',
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0)',
                opacity: 0
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['rgba(255,255,255,1)'],
                width: 1,
                type: 'solid',
                opacity: 0.2
              }
            }
          }
        ],
        series: [
          {
            type: 'bar',
            data: [82.1, 150.3, 519.5, 404.8, 250.3],
            barWidth: 8, // 默认柱子宽度
            itemStyle: {
              color: 'rgba(220, 195, 143, 1)'
            },
            label: {
              show: true,
              position: 'top',
              color: 'rgba(220, 195, 143, 1)'
            }
          }
        ]
      },
      ageChart: {
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          data: [
            '0-30岁',
            '30-50岁',
            '50-70岁',
            '70岁以上'
          ],
          textStyle: {
            color: '#fff' // 设置文字颜色
          },
          itemWidth: 8, // 设置宽度
          itemHeight: 8 // 设置高度
        },
        graphic: [
          {
            type: 'image',
            style: {
              image: require('@/assets/images/age.png'),
              width: 40,
              height: 40
            },
            top: 'center',
            left: '23%'
          }
        ],
        series: [
          {
            name: '',
            type: 'pie',
            hoverAnimation: false,
            radius: ['76%', '70%'],
            center: ['30%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },

            labelLine: {
              show: false
            },
            color: ['#3B76DB', '#1DD586', '#99B9D5', '#5D6368', '#FFbF23'],
            data: [
              { value: 30, name: '0-30岁' },
              { value: 50, name: '30-50岁' },
              { value: 15, name: '50-70岁' },
              { value: 5, name: '70岁以上' }
            ]
          }
        ]
      },
      productChart: {
        grid: {
          left: 0,
          right: 20,
          top: 10,
          bottom: 10,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(255,255,255,1)',
              fontSize: 9
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)',
              opacity: 1
            }
          }
        },
        yAxis: {
          type: 'category',
          data: [
            '全量客户',
            '开通保险客户',
            '开通基金客户',
            '开通理财客户',
            '金卡客户',
            '财富卡客户',
            '手机银行(短信)客户',
            '手机银行(WAP)客户',
            '电话银行客户',
            '个人网银客户',
            '私人银行客户',
            '白金卡客户',
            '理财金客户'
          ],
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(255,255,255,1)',
              fontSize: 11
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)',
              opacity: 1
            }
          }
        },
        series: [
          {
            type: 'bar',
            data: [16055, 1538, 1000, 42540, 16055, 1538, 1000, 42540, 16055, 1538, 1000, 42540, 1523],
            num: 12,
            barWidth: 8, // 默认柱子宽度
            itemStyle: {
              normal: {
                color: 'rgba(220, 195, 143, 1)'
              }
            }
          }
        ]
      }
    }
  },

  components: {
    PageHead,
    ChartTitle,
    VChart
  }
}
</script>

<style lang="less" scoped>
.content {
  padding: 16px;
  .wrapper {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    margin-bottom: 16px;
  }
  .job-resident-rate {
    display: flex;
    padding: 20px 0;
    .left {
      width: 90px;
      height: 90px;
      border-radius: 5px;
      border: 1px solid #ffffff;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      h3 {
        font-size: 20px;
        font-weight: 400;
        color: #dcc38f;
        line-height: 1.5;
      }
      p {
        font-size: 14px;
        color: #fff;
        line-height: 1.5;
      }
    }
    .right {
      flex: 1;
      margin-left: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        color: #fff;
        &:last-child {
          border-bottom: 0;
        }
        span {
          color: #dcc38f;
        }
      }
    }
  }
  .gender-chart {
    height: 120px;
    display: flex;
    .chart-item {
      width: 50%;
      height: 100%;
    }
  }
  .gender-legend {
    display: flex;
    padding-bottom: 20px;
    h2 {
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1.5;
      p {
        font-size: 18px;
        font-weight: 400;
        color: #DCC38F;
      }
      span {
        font-size: 12px;
        color: #fff;
      }
    }
  }
  .job-chart, .waihui-chart {
    height: 160px;
    padding-bottom: 20px;
  }
  .money-chart, .age-chart {
    height: 150px;
    padding-bottom: 20px;
  }
  .product-chart {
    height: 240px;
    padding-bottom: 20px;
  }
}
</style>
